<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" Content="text/html; charset=ISO-8859-15"/>
		<title>Ship demo - Stage.js</title>
		<link href="../../common/docs/docs.css" rel="stylesheet" type="text/css">
		<script src="../../Dependencies/src/?need=Stage"></script>
		<style type="text/css">
			canvas{}
		</style>
		<script type="text/javascript">
			window.addEventListener("load", init, false);

			var _stage, _projectiles;

			function init()
			{
				_stage = new Stage(800, 600, "#container");

				_projectiles = [];
				var p;
				for(var i = 0, max = 200; i<max;i++)
				{
					p = new Projectile();
					p.x = Math.random() * 800;
					p.y = Math.random() * 600;
					_projectiles.push(p);
					_stage.addChild(p);
				}

				_stage.mouseEnabled = true;
				_stage.addEventListener(MouseEvent.CLICK, clickHandler);
				_stage.addEventListener(Event.ENTER_FRAME, frameHandler);
				_stage.addChild(new FPS());
			}

			function frameHandler()
			{
				var p;
				for(var i = 0, max = _projectiles.length;i<max;i++)
				{
					p = _projectiles[i];
					p.update();
				}
			}

			function clickHandler(e)
			{
				var p;
				for(var i = 0, max = _projectiles.length;i<max;i++)
				{
					p = _projectiles[i];
					p.throttle();
					p.setAttractor(new Vector(e.localX, e.localY));
				}
				_stage.clear();
				_stage.beginFill("rgb(45, 45, 45)");
				_stage.drawRect(0, 0, _stage.width, _stage.height);
				_stage.endFill();
				_stage.beginFill("rgba(200, 200, 255, .5)");
				_stage.drawCircle(_stage.mouseX, _stage.mouseY, 10);
				_stage.endFill();
				_stage.beginFill("rgba(200, 200, 255, 1)");
				_stage.drawCircle(_stage.mouseX, _stage.mouseY, 6);
				_stage.endFill();
			}

			function Projectile()
			{
				this.reset();
				this.acceleration = new Vector(0, 0);
				this.attractor = null;
				this._throttle = false;
				this.rotationIncrement = 0;
				this.rotation = -90;
				this.speed = 0.15;
				this.beginFill("rgb(255, 0, 0)");
				this.moveTo(-10, -10);
				this.lineTo(10, 0);
				this.lineTo( -10, 10);
				this.lineTo( -10, -10);
				this.endFill();
			}

			Class.define(Projectile, [Sprite], {
				update:function()
				{
					if(this.attractor != null)
					{
						var d = Math.sqrt(Math.pow((this.attractor.x - this.x), 2) + Math.pow((this.attractor.y - this.y), 2));
						var c = (this.attractor.x - this.x) / d;
						var s = (this.attractor.y - this.y) / d;
						this.rotation = Math.atan2(s, c) * (180/Math.PI);
					}
					this.rotation += this.rotationIncrement;
					var rad = this.rotation * (Math.PI/180);
					if (this._throttle)
					{
						this.acceleration = this.acceleration.add(new Vector(Math.cos(rad) * this.speed, Math.sin(rad) * this.speed));
						this.acceleration = this.acceleration.min(new Vector(3, 3));
						this.acceleration = this.acceleration.max(new Vector(-3, -3));
					}

					this.x += this.acceleration.x;
					this.y += this.acceleration.y;
				},
				throttle:function()
				{
					this._throttle = true;
				},
				stopThrottle:function()
				{
					this._throttle = false;
				},
				setAttractor:function(pAtt)
				{
					this.attractor = pAtt;
				},
				unsetAttractor:function()
				{
					this.attractor = null;
				}
			});


		</script>
	</head>
	<body>
		<header><h1>Ship demo using Stage.js</h1></header>
		<div id="container" class="content"></div>
	</body>
</html>